<template>
  <div style="padding-top: 10px;background-color: #ffffff">
    <!-- 表单 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="searchForm.gender" placeholder="性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入职日期">
        <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :pagination="false" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="50%" align="center" />
      <el-table-column prop="code" label="编号" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" width="140" align="center">
        <template v-slot="scope">
          <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <!--<el-table-column prop="image" label="图像" width="180"></el-table-column>-->
      <el-table-column label="图像" width="180" align="center">
        <template v-slot="">
          <img src="http://s2s3869z3.hn-bkt.clouddn.com/BIM.jpg" width="100px" height="70px">
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="140" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" width="140" align="center"></el-table-column>
      <el-table-column prop="remark" label="血常规" width="140" align="center"></el-table-column>
      <el-table-column el-table-column fixed="right" width="200px" label="操作" align="center">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="dialogFormVisible = true">新增</el-button>
          <el-button type="danger" size="mini" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="pagination-container" style="text-align: right">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="page.page"
        :page-sizes="[5, 10, 15, 25, 30]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" />
    </div>
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal="false" :width="'60%'">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="11">
            <el-form-item label="单行文本" prop="code">
              <el-input v-model="formData.code" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单行文本" prop="name">
              <el-input v-model="formData.name" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单行文本" prop="sex">
              <el-input v-model="formData.sex" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单行文本" prop="age">
              <el-input v-model="formData.age" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单行文本" prop="price">
              <el-input v-model="formData.price" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="单行文本" prop="field106">
              <el-input v-model="formData.remark" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="多行文本" prop="field107">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="多行文本" prop="field108">
              <el-input v-model="formData.field108" type="textarea" placeholder="请输入多行文本"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import zhCn from 'element-ui/lib/locale/lang/zh-CN'
import axios from 'axios'
export default {
  data () {
    return {
      pagination: { // 分页相关模型数据
        currentPage: 1, // 当前页码
        pageSize: 7, // 每页显示的记录数
        total: 0, // 总记录数
        queryString: null// 查询条件
      },
      dataList: [], // 当前页要展示的分页列表数据
      dialogFormVisible4Edit: false, // 编辑表单是否可见
      dialogFormVisible: false,
      formLabelWidth: '120px',
      locale: zhCn,
      tableData: [],
      form: [],
      searchForm: {
        entrydate: ''
      },
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 5
      },
      formData: {
        imageUrl: ''
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入单行文本',
          trigger: 'blur'
        }]
      }
    }
  },
  components: {},
  props: [],
  created () {
    this.getData()
  },
  methods: {
    handleUpdate (row) {
      this.dialogFormVisible = true
      axios.get('http://127.0.0.1:5000/checkItem/' + row.id).then((resp) => {
        this.formData = resp.data.data
      })
    },
    handleSelectionChange () {},
    handleEdit () {},
    onSubmit () {
      this.getData()
    },
    getData () {
      const currentPage = this.page.currentPage
      const pageSize = this.page.pageSize
      const _this = this
      // 发送请求获取分页数据
      axios.get('http://127.0.0.1:5000/checkItem/' + currentPage + '/' + pageSize)
        .then(resp => {
          const data = resp.data
          _this.page.total = data.total
          // alert('this.total')
          this.tableData = data.rows
        })
        .catch(error => {
          console.error('Error:', error)
        })
    },
    // 切换页码
    handleCurrentChange (currentPage) {
    },
    deleteItem (row) {
      this.$confirm('此操作将永久删除检查项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://127.0.0.1:5000/checkItem/' + row.id).then(resp => {
          if (resp.data.flag) {
            this.$message({
              type: 'success',
              message: resp.data.message
            })
          }
          this.getData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handlePageSizeChange (pageSize) {
      this.page.pageSize = pageSize
      this.page.currentPage = 1 // 重置为第一页
      this.getData()
    },
    handleCurrentPageChange (currentPage) {
      this.page.currentPage = currentPage
      this.getData()
    }
  }
}
</script>

<style>
/* 样式省略 */
</style>
